import "./index.css"
let data = [
  {
    src: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c758eb7e0dce4307c62c47155519bc80.png?thumb=1&w=180&h=124&f=webp&q=90",
  },
  {
    src: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/db20078b0c1a5f07dcf85000b17b7322.png?thumb=1&w=180&h=124&f=webp&q=90",
  },
  {
    src: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d3fec390debf1164c8df721e821cc28a.png?thumb=1&w=180&h=124&f=webp&q=90",
  },
  {
    src: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/07c66ae36f99daa4d5f613bb3d04ded6.png?thumb=1&w=180&h=124&f=webp&q=90",
  },
  {
    src: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1ba211a988be47d7ae5a1a448ecf0b67.jpeg?thumb=1&w=180&h=124&f=webp&q=90",
  },
  {
    src: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/52c8cab6760eadd9e01871dfbf27817f.png?thumb=1&w=180&h=124&f=webp&q=90",
  },
  {
    src: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/09f5d6379d431d34c7986bf81116ee3a.png?thumb=1&w=180&h=124&f=webp&q=90",
  },
];

// 初始化
let btnLeft = document.querySelector(".left");
let btnRight = document.querySelector(".right");
let main = document.querySelector("main");
// 根据数据长度去创建div，并赋予相应的自定义id
for (let i = 0; i < data.length; i++) {
  main.innerHTML += `<div id=${i}>
  <img src="${data[i].src}" alt="" />
</div>`;
}
let divs = document.querySelectorAll("div");
// 初始化3张能见的图片
divs[0].className = "slideShowLeft";
divs[1].className = "slideShowMain";
divs[2].className = "slideShowRight";
let temp = 0;
// 向左走事件
function left() {
  // 获取左中右三个元素
  let slideShowLeft = document.querySelector(".slideShowLeft");
  let slideShowMain = document.querySelector(".slideShowMain");
  let slideShowRight = document.querySelector(".slideShowRight");
  // 获取最右图片的下一张
  if (slideShowRight.id == 6) {
    temp = 0;
  } else {
    temp = +slideShowRight.id + 1;
  }
  let slideTemp = document.getElementById(temp);

  // 将主视角的三张图片替换
  slideShowLeft.classList.remove("slideShowLeft");
  slideShowMain.className = "slideShowLeft";
  slideShowRight.className = "slideShowMain";
  slideTemp.className = "slideShowRight";
}
// 点击触发左滑动
btnLeft.addEventListener("click", function () {
  left();
});
// 向右走事件
function right() {
  let slideShowLeft = document.querySelector(".slideShowLeft");
  let slideShowMain = document.querySelector(".slideShowMain");
  let slideShowRight = document.querySelector(".slideShowRight");
  // 获取最左图片的上一张
  if (slideShowLeft.id == 0) {
    temp = 6;
  } else {
    temp = +slideShowLeft.id - 1;
  }
  let slideTemp = document.getElementById(`${temp}`);
  // 将主视角的三张图片替换
  slideShowRight.classList.remove("slideShowRight");
  slideShowMain.className = "slideShowRight";
  slideShowLeft.className = "slideShowMain";
  slideTemp.className = "slideShowLeft";
}
// 点击触发右滑动
btnRight.addEventListener("click", function () {
  // 获取左中右三个元素
  right();
});
// 初始定时器
let time;
time = setInterval(function () {
  left();
}, 2000);
// 鼠标移入事件
main.addEventListener("mouseover", function (e) {
  // 如果进入的目标是img才进行停止定时器
  if (e.target.tagName === "IMG") {
    clearInterval(time);
  }
});
// 鼠标移出事件
main.addEventListener("mouseout", function () {
  // 先清除原来的定时器
  clearInterval(time);
  time = setInterval(function () {
    left();
  }, 2000);
});